<!-- dialog_table -->
<template>
  <div class="dialog_table">
    <div class="flex align-center m-b-1">
      <span class="tit_span nowarp">分润方案：</span>
      <el-input
        class="flex-1"
        v-model="obj.idName"
        placeholder="请输入内容"
      ></el-input>
    </div>
    <div class="flex m-b-1 align-center">
      <span class="tit_span nowarp">分润时间：</span>
      <el-date-picker
        class="flex-1"
        v-model="obj.timeValue"
        type="datetimerange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      >
      </el-date-picker>
    </div>
    <div class="flex m-b-1 align-center w-100">
      <span class="tit_span nowarp">备注：</span>
      <el-input
        class="flex-1"
        type="textarea"
        placeholder="请输入内容"
        v-model="obj.textarea"
        maxlength="30"
        show-word-limit
      />
    </div>
    <div class="m-b-1 float_none">
      <el-button class="float_right" @click="addladderArray"
        >新增阶梯方案</el-button
      >
    </div>
    <div class="auto-scroll">
      <div
        class="flex m-t-1 align-center space-between ladder_item"
        v-for="(item, index) of ladderArray"
        :key="index"
      >
        <i class="el-icon-circle-close" @click="deleteladderArray(index)"></i>
        <el-input class="ladder_name" v-model="item.ladName"></el-input>
        <div class="flex-1">
          <div
            class="flex align-center space-between ladder_cell"
            v-for="(cell, idx) of item.ladList"
            :key="idx"
          >
            <div class="flex align-center">
              <el-input class="ladder_name" v-model="cell.stageName"></el-input>
              <i
                class="el-icon-circle-close"
                @click="deleteladList(index, idx)"
              ></i>
            </div>
            <div>
              <p
                class="flex align-center"
                v-for="(limi, i) of cell.sellList"
                :key="i"
              >
                <el-input v-model="limi.sellName" class="sellName"></el-input>
                <el-input type="number" v-model="limi.percent">
                  <template slot="append">%</template>
                </el-input>
                <i
                  class="el-icon-circle-close"
                  @click="deletelimi(index, idx, i)"
                ></i>
              </p>
              <el-button size="small" type="info" @click="pushlimi(index, idx)"
                >插入</el-button
              >
            </div>
          </div>
          <el-button size="small" type="info" @click="pushLadder(index)"
            >插入</el-button
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  //import引入的组件需要注入到对象中才能使用
  name: 'dialog_table',
  components: {},
  data () {
    //这里存放数据
    return {
      ladderArray: [

      ]
    };
  },
  props: {
    dialogType: {
      type: String,
      default: "add"
    },
    obj: {
      type: Object,
      default: function () {
        return {
          idName: "",
          timeValue: "",
          textarea: ""
        }
      }
    }
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    addladderArray () {
      this.ladderArray.push({
        ladName: "阶梯方案名",
        ladList: [
          {
            stageName: '第几阶段',
            sellList: [
              { sellName: "销售名称", percent: 0 }
            ]
          }
        ],
      })
    },
    deleteladderArray (index) {
      this.ladderArray.splice(index, 1)
    },
    //插入多一个 第几阶段
    pushLadder (index) {
      this.ladderArray[index].ladList.push({
        stageName: '第几阶段',
        sellList: [
          { sellName: "销售名称", percent: 0 }
        ]
      })
    },
    deleteladList (index, idx) {
      this.ladderArray[index].ladList.splice(idx, 1)
    },
    //插入一个销售
    pushlimi (index1, index2) {
      this.ladderArray[index1].ladList[index2].sellList.push({ sellName: "销售名称", percent: 0 })
    },
    deletelimi (index, idx, i) {
      this.ladderArray[index].ladList[idx].sellList.splice(i, 1)
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created () {

  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {

  },
  beforeCreate () { }, //生命周期 - 创建之前
  beforeMount () { }, //生命周期 - 挂载之前
  beforeUpdate () { }, //生命周期 - 更新之前
  updated () { }, //生命周期 - 更新之后
  beforeDestroy () { }, //生命周期 - 销毁之前
  destroyed () { }, //生命周期 - 销毁完成
  activated () { }, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
//@import url(); 引入公共css类
<style  scoped>
.auto-scroll .flex > .el-input {
  width: 80px;
}
.ladder_item {
  width: 95%;
  border-bottom: 1px solid #cecece;
  padding: 5px 0;
}
.ladder_cell + .ladder_cell {
  border-top: 2px dashed #f6bcbc;
}
.ladder_cell {
  padding: 5px 0;
}
.ladder_name {
  width: 100px !important;
  margin-right: 3%;
}
.sellName {
  width: 100px !important;
}
.auto-scroll {
  overflow-y: auto;
  max-height: 300px;
  border-top: 1px solid rgb(240, 240, 240);
}
.dialog_table >>> .el-input-group__append {
  padding: 0 !important;
}
.dialog_table >>> .el-input-group--append .el-input__inner {
  padding: 0 !important;
}
.el-icon-circle-close {
  font-size: 18px;
  transition: color 0.25s linear;
}
.el-icon-circle-close:hover {
  color: #cecece;
  cursor: pointer;
}
</style>